<template>
    <div>
        <div class="cont">
            <Towone :header="Header"></Towone>
        </div>
    
        <Tab bar-active-color="#3190E8" v-model="pageIndex">
            <tab-item selected active-class="high-light">商品</tab-item>
            <tab-item active-class="high-light">评价</tab-item>
        </Tab>
    
        <div>
            <Shangpin v-show="pageIndex==0" :menuInfo="ShangPin"></Shangpin>
            <Pingjia v-show="pageIndex==1" :pingjia="Header" :pingfen='pingjia' :quanbu='quanbu'></Pingjia>
        </div>
    
        <footer class="footer" v-show="pageIndex==0">
            <div class="f-left">
                <img src='static/gou.png'>
                <span class="span1">￥0</span>
                <br/>
                <span class="span2">配送费 ￥{{Header.float_delivery_fee}} </span>
            </div>
            <div class="f-right">
                <span>￥{{Header.float_minimum_order_amount}}起送</span>
            </div>
        </footer>
    
    </div>
</template>

<script>
import bus from "../utils/bus.js";
import Towone from '../components/Towone.vue';
import Shangpin from '../components/Shangpin.vue';
import Pingjia from '../components/Pingjia.vue'
import { Tab, TabItem } from 'vux';

// import Towtabbar from '../components/Towtabbar.vue'
export default {
    components: {
        Towone,
        Tab,
        TabItem,
        Shangpin,
        Pingjia,
        // Towtabbar
    },
    data: function () {
        return {
            Header: {},  // 用于获取头部信息
            pageIndex: 0,   // 显示商店/评价的数据信息
            ShangPin: {},   // 商品评价的信息
            pingjia: {},  // 全部评价
            quanbu: [] // 全部信息
        }
    },
    mounted: function () {
        this.initData();
        this.requestHeaderInfo();
        this.requestMenuInfo();
        this.requestpingjia();
        this.requestquanbu()
        // this.requestmanyi()
    },
    methods: {
        initData: function () {
            this.Header = {};
            this.pageIndex = 0;
            this.ShangPin = {};
            this.pingjia = {};
            this.quanbu = []
        },
        // 获取头部的数据信息
        requestHeaderInfo: function () {
            this.$ajax.get("ele/shopping/restaurant/" + this.$route.params.resid, {
                params: {
                    latitude: bus.latitude,
                    longitude: bus.longitude,
                    "extras": ["activities", "albums", "license", "identification"]
                }
            })
                .then(function (res) {
                    // console.dir(res.data);
                    this.Header = res.data;
                }.bind(this));
        },
        // 获取商店列表的信息
        // https://h5.ele.me/shop/#geohash=ww0v3q6mu7w3&id=557178
        requestMenuInfo: function () {
            this.$ajax.get("ele/shopping/v2/menu", {
                params: {
                    restaurant_id: this.$route.params.resid
                }
            })
                .then(function (res) {
                    // console.dir(res.data)
                    this.ShangPin = res.data;
                }.bind(this));
        },
        // 获取全部评价信息
        requestpingjia: function () {
            this.$ajax.get('ele/ugc/v2/restaurants/' + this.$route.params.resid + '/ratings/scores', {
                params: {}
            })
                .then(function (res) {
                    // console.dir(res.data)
                    this.pingjia = res.data
                }.bind(this))
        },
        // 获取全部评价样式的信息
        // https://mainsite-restapi.ele.me/ugc/v2/restaurants/557178/ratings/tags
        requestquanbu() {
            this.$ajax.get('ele/ugc/v2/restaurants/' + this.$route.params.resid + '/ratings/tags', {
                params: {}
            })
                .then(function (res) {
                    console.dir(res.data)
                    this.quanbu = res.data
                }.bind(this))
        }
    },

}
</script>

<style scoped>
.footer {
    z-index: 500;
    height: 70px;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
}

.f-left {
    width: 65%;
    background-color: #464648;
}

.f-left img {
    position: relative;
    left: 20px;
    top: -20px;
    color: #66666A;
    width: 40px;
    height: 40px;
    background-color: #3F3F3F;
    padding: 5px;
    border: 6px solid #4C4D4D;
    border-radius: 50%;
}

.f-left .span1 {
    position: relative;
    top: -35px;
    left: 25px;
    font-size: 18px;
    color: #FEFEFE;
}

.f-left .span2 {
    position: relative;
    top: -35px;
    left: 90px;
    font-size: 12px;
    color: #FEFEFE;
}

.f-right {
    width: 35%;
    background-color: #5B5B5E;
    text-align: center;
    line-height: 60px;
}

.f-right span {
    color: #FEFEFE;
    font-size: 24px;
    font-weight: 700;
}

</style>


